<template>
  <div class="container">
    <div class="img">
      <img src="../../assets/image/login.jpg" alt="" />
    </div>
    <div class="login-box" @click="$router.push('/register')">注册</div>
    <router-link to="/login" tag="div" class="register-box">登录</router-link>
  </div>
</template>

<script>
export default {};
</script>

<style coped lang="less">
@color: #ff5656;
.container {
  color: #fff;
  .img img {
    width: 100%;
    height: 180px;
    margin-bottom: 20px;
  }
  .login-box,
  .register-box {
    font-size: 16px;
    letter-spacing: 1px;
    width: 5.5rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background: @color;
    border-radius: 5px;
    margin: 0.8rem 1rem;
  }
  .register-box {
    box-sizing: border-box;
    color: @color;
    background: #fff;
    border: 1px solid @color;
  }
}
</style>